.border(@size: 0.25,
  @left: 0,
  @right: 0,
  @bgColor: var(--emui_color_divider_horizontal)) {
  position: relative;

  &::after {
    content: '';
    display: block;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: @left;
    right: @right;
    background-color: @bgColor;
    transform: scaleY(@size);
  }
}

.borderTop(@size: 0.25,
  @left: 0,
  @right: 0,
  @bgColor: var(--emui_color_divider_horizontal)) {
  position: relative;

  &::after {
    content: '';
    display: block;
    height: 1px;
    position: absolute;
    top: 0;
    left: @left;
    right: @right;
    background-color: @bgColor;
    transform: scaleY(@size);
  }
}

.borderR(@size: 0.25,
  @top: 50%,
  @right: 0,
  @height: 100%,
  @color: var(--emui_color_divider_horizontal)) {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: @top;
    right: @right;
    width: 1px;
    height: @height;
    background-color: @color;
    transform: translateY(-50%) scaleX(@size);
  }
}

.appear() {
  @keyframes appear {
    0% {
      bottom: -100%;
    }

    to {
      bottom: 0.4rem;
    }
  }
}

.mask(@bgColor: var(--emui_mask_thin)) {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: @bgColor;
  z-index: 199999991;
}

.active(@radius: var(--emui_corner_radius_clicked),
  @color: var(--emui_clickeffic_default_color)) {
  &:not(.disable) {
    &:active {
      background-color: @color;
      border-radius: @radius;
    }
  }
}

.btn(@color: var(--emui_accent),
  @bgColor: var(--emui_color_list_divider_light),
  @bgActiveColor: var(--emui_clickeffic_default_color)) {
  .btn {
    width: 100%;
    padding: 1.6rem 2.4rem 2.4rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    background-color: var(--emui_color_subbg);

    .disable {
      opacity: 0.38;
    }

    .btn-box {
      width: 18rem;
      height: 4rem;
      background-color: @bgColor;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: var(--emui_text_size_button1);
      color: @color;
      border-radius: 2rem;
      .medium();

      &:not(.disable) {
        &:active {
          background-color: @bgActiveColor;
        }
      }
    }
  }

  .pad {
    .add {
      .add-box {
        width: var(--pad_column_3);
      }
    }
  }
}

.fade() {

  &.com-fade-enter,
  &.com-fade-leave-active {
    opacity: 0;
  }

  &.com-fade-enter-active,
  &.com-fade-leave-active {
    transition: all 0.3s ease-in-out;
  }
}

.move(@height: 31.6rem) {

  &.com-move-enter,
  &.com-move-leave-active {
    transform: translate3d(0, @height, 0);
  }

  &.com-move-enter-active,
  &.com-move-leave-active {
    transition: all 0.3s ease-in-out;
  }
}

.spread() {

  &.fade-enter,
  &.fade-leave-active {
    height: 0;
  }

  &.fade-enter-active,
  &.fade-leave-active {
    transition: all 0.3s ease;
  }
}

.medium() {
  font-family: "PingFangSC-Medium";
}

.cardStyle {
  margin: 0 var(--emui_dimens_card_start) 1.2rem var(--emui_dimens_card_end);
  padding: 0 var(--emui_dimens_card_inner_end) 0 var(--emui_dimens_card_inner_start);
  background-color: var(--emui_card_panel_bg);
  border-radius: var(--emui_corner_radius_large);
}

.color() {
  .green {
    background-color: var(--emui_color_connected);
  }

  .yellow {
    background-color: var(--emui_color_warning);
  }

  .red {
    background-color: var(--emui_functional_red);
  }
}



/deep/ .van-picker {
  background-color: var(--emui_popup_bg);
}

/deep/ .van-picker__mask {
  background-image: var(--gradient_picker);
}

/deep/.van-hairline-unset--top-bottom.van-picker__frame {
  height: 5.6rem !important;
  ;
}

/deep/ .van-picker-column__item {
  color: var(--emui_text_primary);
}

/deep/.van-picker-column__item--selected {
  color: var(--xwq_color) !important;
}

.navBar {
  /deep/.van-tabs {
    width: 50%;
    margin: 0 auto;
  }

  /deep/.van-tab--active {
    color: var(--xwq_color) !important;
  }


  background: none !important;

  /deep/.van-tabs__nav {
    background: none !important;
  }

  /deep/.van-tab {
    color: var(--emui_text_secondary);
    font-size: 1.6rem !important;
    margin-left: 1.6rem;
  }

  /deep/.van-tab:first-child {
    margin-left: 0rem;
  }

  /deep/.van-tabs__line {
    width: 3.2rem;
    height: 0.2rem;
  }
}

.timeSelect,
.dataList,
.title {
  color: var(--emui_text_primary) !important;
}

.card .dataList li .leftText {
  //font-size: 1.4rem!important;
  color: var(--emui_text_primary) !important;
}

.card .dataList li .rightText {
  font-size: 1.4rem !important;
  color: var(--emui_text_secondary) !important;
}

.card .dataList li {
  border-color: var(--emui_color_subheader_divider) !important;
}

@media only screen and (min-width: 800px) {
  #versionInfo {
    .timeSelect {
      width: calc((100% - 10.8rem) / 8 * 6 + 5 * 1.2rem) !important;
      margin: 0rem auto 1.2rem !important;

      .timeTitle {
        width: 100% !important;
        ;
      }
    }

    .card,.second2 {
      width: calc((100% - 10.8rem) / 8 * 6 + 5 * 1.2rem) !important;
      margin: 0rem auto 1.2rem !important;
    }

    .second {
      width: calc((100% - 10.8rem) / 8 * 6 + 5 * 1.2rem) !important;
      margin: 0 auto 1.2rem!important;
    }

    .titleSecond {
      width: calc((100% - 10.8rem) / 8 * 6 + 5 * 1.2rem) !important;
      margin: 0rem auto !important;
    }
    .titleSecond1 {
      width: calc((100% - 10.8rem) / 8 * 6 + 5 * 1.2rem) !important;
    }


    .infoList {
      width: calc((100% - 10.8rem) / 8 * 6 + 5 * 1.2rem) !important;
      margin: 0 auto !important;
    }
  }

  .bottom-btn {
    .btn {
      width: calc((100% - 10.8rem) / 8 * 3) !important;
    }
  }
}

@media only screen and (min-width: 600px) and (max-width:800px) {
  #versionInfo {
    .card,.second2 {
      width: calc((100% - 10.8rem) / 8 * 6 + 5 * 1.2rem);
      margin: 0rem auto 1.2rem !important;
    }

    .timeSelect {
      width: calc((100% - 10.8rem) / 8 * 6 + 5 * 1.2rem) !important;
      margin: 0rem auto 1.2rem !important;

      .timeTitle {
        width: 100% !important;
      }
    }

    .second {
      width: calc((100% - 10.8rem) / 8 * 6 + 5 * 1.2rem) !important;
      margin: 0 auto 1.2rem!important;
    }

    .titleSecond {
      width: calc((100% - 10.8rem) / 8 * 6 + 5 * 1.2rem) !important;
      margin: 0rem auto !important;
    }
    .titleSecond1 {
      width: calc((100% - 10.8rem) / 8 * 6 + 5 * 1.2rem) !important;
    }
  }

  .bottom-btn {
    .btn {
      width: calc((100% - (9 * 1.2rem)) / 8 * 3) !important;
    }
  }
}

#versionInfo {
  .timeSelect {
    width: 100%;

    .timeTitle {
      line-height: 4.8rem;
      height: 4.8rem;
      width: calc(100% - 2.4rem);
      margin: 0 auto;
      display: flex;
      justify-content: center;
      justify-items: center;
      align-content: center;
      align-items: center;

      .leftArrow {
        width: 2.4rem;
        height: 2.4rem;
        background-size: cover;
        background-position: center;
      }

      .centerText {
        width: calc(100% - 4.8rem);
        font-size: 1.6rem;
        text-align: center;
      }

      .rightArrow {
        width: 2.4rem;
        height: 2.4rem;
        background-size: cover;
        background-position: center;
      }
    }

    .nowTime {
      font-size: 1.6rem;
      line-height: 4.8rem;
      text-align: center;
      color: var(--emui_text_secondary);
    }

    .timeData {
      font-size: 1.2rem;
      line-height: 4.8rem;
      text-align: center;
      color: var(--emui_text_secondary);

      span {
        color: var(--emui_text_primary);
        font-size: 3.6rem;
      }
    }
  }

  .titleSecond {
    width: calc(100% - 2.4rem);
    font-size: 1.4rem;
    text-align: left;
    line-height: 3.6rem;
    height: 3.6rem;
    padding: 0 0 0 2.4rem;


    color: var(--emui_text_secondary) !important;
  }
  .titleSecond1 {
    width: calc(100% - 2.4rem);
    font-size: 1.4rem;
    text-align: left;
    line-height: 3.6rem;
    height: 3.6rem;
    padding: 0 0 0 1.2rem;


    color: var(--emui_text_secondary) !important;
  }

  .second {
    height: 8.8rem !important;
  }

  .card {
    align-self: stretch;
    .cardStyle();
    //margin-top: 0.8rem;
    padding: 0.4rem 0;

    .switch {
      width: 4rem;
      height: 2rem;
      background-image: var(--ic_switch_off);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right center;

      &.on {
        background-image: var(--ic_switch_on);
      }
    }
  }
}
